<!-- 视图层 -->
<template>
  <van-nav-bar
    title="意见反馈"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-search v-model="value" placeholder="请输入搜索关键词" />
  <div class="body">
    <div class="content" v-for="(value, index) in arr" :key="inex">
      <div class="one">
        <span>反馈类型：{{ value.type }}</span
        ><van-button plain :type="value.color" class="bt">{{
          value.state
        }}</van-button>
      </div>
      <div class="two">
        <span>内容：{{ value.content }}</span>
      </div>
    </div>
  </div>
  <van-button type="primary" block @click="runAdd">添加反馈</van-button>
</template>
<!-- 逻辑层 -->
<script setup>
import { ref } from "vue";
// 导入useRouter方法
import { useRouter } from "vue-router";
const router = useRouter();
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
const runAdd = () => {
  router.push("/add");
};
const value = ref("");
const arr = ref([
  {
    type: "意见反馈",
    state: "已回复",
    content:
      "上课听好老师讲的每一节课，只要你努力，就会有更多的希望。好好学习吧!知识永远是最强的力量。",
    color: "primary",
  },
  {
    type: "意见反馈",
    state: "已回复",
    content: "xx这学期在学习上变化不大，希望在下个学期里能够有所提高。",
    color: "primary",
  },
  {
    type: "意见反馈",
    state: "未回复",
    content:
      "希望孩子在学习和生活中，是积极的，健康向上的。要是非分明，做一个优秀的好学生。",
    color: "default",
  },
  {
    type: "意见反馈",
    state: "未回复",
    content:
      "看到自己的进步，改进自己的不足。发扬自己的长处。把要做的事尽力做到更好",
    color: "default",
  },
]);
</script>
<!-- 样式层 -->
<style  scoped>
.content {
  width: 100%;
  padding: 4vw 0;
  border: 0.2667vw solid #e6e6e6;
}
.content div {
  width: 90%;
  margin: 0 auto;
}
.one {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.two {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body {
  margin-bottom: 5.3333vw;
}
.bt {
  width: 14.3333vw !important;
  padding: 0.2667vw !important;
  height: 8.6667vw;
}
</style>